<script setup>
import { ArrowRightBold } from '@element-plus/icons-vue'
defineProps({
  cardTitle: String
})
</script>

<template>
  <el-card
    shadow="hover"
    :body-style="{
      padding: '10px',
      width: '100%',
      display: 'flex',
      'justify-content': 'space-between',
      'text-align': 'center',
      cursor: 'pointer'
    }"
    style="display: flex"
  >
    <template #default>
      <div style="display: flex; align-items: center">
        <el-icon color="#409efc" size="18px">
          <slot name="icon"></slot
        ></el-icon>
        <el-text size="default" style="padding-left: 5px">
          {{ cardTitle }}</el-text
        >
      </div>
      <div style="display: flex; align-items: center">
        <el-icon color="#409efc">
          <ArrowRightBold />
        </el-icon>
      </div>
    </template>
  </el-card>
</template>
